<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未来智慧综合能源管理系统-用能分析用能足记</title>
    <link rel="stylesheet" href="../js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="../css/svg.css" type="text/css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/engineer.css">
    <link rel="stylesheet" href="../css/iconfonts/iconfont.css">
</head>
<body class="">
<div class="page" id="app">
    <div class="header">
        <div class="header-top">
            <a href="" class="logo icon iconfont icon-logo"></a>
            <div class="title">
                <p>智慧综合能源管理系统</p>
                <span>Smart Integrated Energy Management System</span>
            </div>
            <div class="user-options">
                <span class="user">Admin</span><span class="line">|</span><a href="javascript:void(0)">注销</a>
            </div>
            <div class="top-notice">
                <ul>
                    <li><a href="">1头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动1</a></li>
                    <li><a href="">2头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动12</a></li>
                    <li><a href="">3头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动13</a></li>
                </ul>
            </div>
            <div class="main-menu">
                <p class="date">2017年4月3日 星期一 15:30</p>
                <ul>
                    <li class="active"><a href=""><i class="icon iconfont icon-water"></i><span>水</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-elec"></i><span>电</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-gass"></i><span>气</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-mei"></i><span>煤</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-swz"></i><span>生物质</span></a></li>
                </ul>
            </div>
        </div>
        <div class="header-bottom">
            <a href="#" class="home"><i class="icon iconfont icon-home"></i></a>
            <div class="bread-thumb">
                <span>用能分析</span>
                <i class="icon iconfont icon-arroow"></i>
                <span>用能足记</span>
            </div>
            <div class="rbg"></div>
            <div class="menu">
                <a href="javascript:void(0)" class="prev-menu-btn icon iconfont icon-btn-close"></a>
                <div class="menu-box">
                    <div class="menu-wrapper">
                        <ul class="menu-leave1">
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jbxx"></i><span>基本信息</span></a></li>
                            <li>
                                <a href="yngl.html"><i class="icon iconfont icon-yngl"></i><span>用能概览</span></a>
                            </li>
                            <li class="active"><a href=""><i class="icon iconfont icon-gjfx"></i><span>用能分析</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>高级分析</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>节能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>报表中心</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-bjgl"></i><span>报警管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>计费管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-sbgl"></i><span>重点设备管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>车间用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>工艺用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>产品用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能看板</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>用能维护</span></a></li>
                        </ul>
                    </div>
                    <div class="sub-menu">
                        <div class="inner">
                            <ul>
                                <li>
                                    <a href="Profile.html">企业简介</a>
                                    <span>|</span>
                                    <a href="Agency.html">能源机构管理</a>
                                    <span>|</span>
                                    <a href="System.html">能源管理制度</a>
                                    <span>|</span>
                                    <a href="Engineer.html">工程师资源</a>
                                    <span>|</span>
                                    <a href="Assets.html">计量器具管理</a>
                                    <span>|</span>
                                    <a href="nywlt.html">能源网络图</a>
                                    <span>|</span>
                                    <a href="nylxt.html">能源流向图</a>
                                </li>
                                <li></li>
                                <li>
                                    <a href="data-query.html">数据查询</a>
                                    <span>|</span>
                                    <a class="active" href="ynzj.html">用能足迹</a>
                                    <span>|</span>
                                    <a href="jbfx.html">基本分析</a>
                                    <span>|</span>
                                    <a href="index.html">对比分析</a>
                                    <span>|</span>
                                    <a href="pmtj.html">排名统计</a>
                                </li>
                                <li>
                                    <a href="cbfx.html">成本分析</a>
                                    <span>|</span>
                                    <a href="shfx.html">损耗分析</a>
                                    <span>|</span>
                                    <a href="fhfx.html">负荷分析</a>
                                    <span>|</span>
                                    <a href="xlfx.html">需量分析</a>
                                    <span>|</span>
                                    <a class="active" href="hjfx.html">环境分析</a>
                                    <span>|</span>
                                    <a href="ycfx.html">预测分析</a>
                                </li>
                                <li>
                                    <a href="jzfx.html">基准分析</a>
                                    <span>|</span>
                                    <a href="ynpg.html">用能评估</a>
                                    <span>|</span>
                                    <a href="zbfx.html">指标分析</a>
                                </li>
                                <li>
                                    <a  href="Report.html">单点报表</a>
                                    <span>|</span>
                                    <a href="jxwbb.html">经信委报表</a>
                                </li>
                                <li>
                                    <a  href="txbj.html">通讯故障</a>
                                    <span>|</span>
                                    <a href="ycbj.html">异常数据</a>
                                    <span>|</span>
                                    <a href="qtbj.html">设备启停</a>
                                    <span>|</span>
                                    <a href="debj.html">超定额报警</a>
                                    <span>|</span>
                                    <a href="gybj.html">工艺控制报警（生产）</a>
                                    <a href="Report.html">单点报表</a>
                                </li>
                                <li>
                                    <a href="jfsz.html">计费设置</a>
                                    <span>|</span>
                                    <a href="dbkh.html">电表开户</a>
                                    <span>|</span>
                                    <a href="khgl.html">客户管理</a>
                                    <span>|</span>
                                    <a href="dyfy.html">当月费用</a>
                                    <span>|</span>
                                    <a href="lszd.html">历史账单</a>
                                </li>
                                <li>
                                    <a href="ssjk.html">实时监测</a>
                                    <span>|</span>
                                    <a href="sbynfx.html">设备用能分析</a>
                                    <span>|</span>
                                    <a href="sbclsr.html">设备产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="sbdepz.html">设备定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="sbnxdb.html">设备能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="sbzhnxqs.html">设备综合能效趋势（生产）</a>
                                    <span>|</span>
                                    <a href="sbnhbb.html">设备能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qynhsj.html">企业能耗数据（生产）</a>
                                    <span>|</span>
                                    <a href="cpcltj.html">产品产量统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhtj.html">产品单耗统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhbb.html">产品单耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cjdepz.html">车间定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cjnxdb.html">车间能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cjzhnhqs.html">车间综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cjnhbb.html">车间能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="gyjbxx.html">工艺基本信息（生产）</a>
                                    <span>|</span>
                                    <a href="gyclsr.html">工艺产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="gydepz.html">工艺定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="gynxdb.html">工艺能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="gynhbb.html">工艺能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cpdepz.html">产品定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cpnxdb.html">产品能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cpzhnhqs.html">产品综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cpnhbb.html">产品能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qykb.html">企业看板（生产）</a>
                                    <span>|</span>
                                    <a href="cjkb.html">车间看板（生产）</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a href="javascript:void(0)" class="next-menu-btn icon iconfont icon-btn-open"></a>

            </div>
            <div class="lbg"></div>
        </div>
    </div>
    <div class="content" style="top:170px;bottom: 50px;">

        <div class="ynzj">
            <div class="item">
                <div class="item-hd">今日用能足迹</div>
                <div class="item-bd">
                    <div class="jrynzj-table">
                        <table width="100%" cellspacing="0" cellpadding="0">
                            <thead>
                                <tr>
                                    <th>
                                        <img class="th-img" src="../images/iconMaxPower.svg" alt="">
                                        <br>
                                        <span>当前单位时间最多用能量</span>
                                    </th>
                                    <th>
                                        <img class="th-img" src="../images/iconMaxPower.svg" alt="">
                                        <br>
                                        <span>当前单位时间最大负荷</span>
                                    </th>
                                    <th>
                                        <img class="th-img" src="../images/iconMaxPower.svg" alt="">
                                        <br>
                                        <span>当前尖时段用能总量</span>
                                    </th>
                                    <th>
                                        <img class="th-img" src="../images/iconMaxPower.svg" alt="">
                                        <br>
                                        <span>当前峰时段用能总量</span>
                                    </th>
                                    <th>
                                        <img class="th-img" src="../images/iconMaxPower.svg" alt="">
                                        <br>
                                        <span>当前平时段用能总量</span>
                                    </th>
                                    <th>
                                        <img class="th-img" src="../images/iconMaxPower.svg" alt="">
                                        <br>
                                        <span>当前谷时段用能总量</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                <tr>
                                    <td>
                                        <span class="value" style="color: #00FF00;" v-text="data.CurrentMaxKwh.Value"></span>
                                        <span>KWh</span>
                                        <p>
                                            <span>发生于:</span>
                                            <span class="time" v-text="data.CurrentMaxKwh.Label.split(' ')[1]"></span>
                                        </p>
                                    </td>
                                    <td>
                                        <span class="value" style="color: #FFFF00;" v-text="data.CurrentMaxLoad.Value"></span>
                                        <span>KWh</span>
                                        <p>
                                            <span>发生于:</span>
                                            <span class="time" v-text="data.CurrentMaxLoad.Label.split(' ')[1]"></span>
                                        </p>
                                    </td>
                                    <td><span class="value" style="color: #FF3366;" v-text="data.CurrentJian"></span><span>KWh</span></td>
                                    <td><span class="value" style="color: #FF7ACC;" v-text="data.CurrentFeng"></span><span>KWh</span></td>
                                    <td><span class="value" style="color: #33CCFF;" v-text="data.CurrentPing"></span><span>KWh</span></td>
                                    <td><span class="value" style="color: #00FF99;" v-text="data.CurrentGu"></span><span>KWh</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="ynzj-bottom">
                <div class="item">
                    <!--<div class="hd" style="color:rgb(7, 249, 0)">上月实际用能量详细</div>-->
                    <div class="bd">
                        <div class="legend-item">
                            <ul>
                                <li class="jian" style="color:#FF3366">&circledcirc;尖</li>
                                <li class="feng" style="color:#FF7ACC">&circledcirc;峰</li>
                                <li class="ping" style="color:#33CCFF">&circledcirc;平</li>
                                <li class="gu" style="color:#00FF99">&circledcirc;谷</li>
                            </ul>
                        </div>
                        <div class="bar-chart" id="lastMonthChart">

                        </div>
                    </div>
                </div>
            </div>
            <div class="item" style="margin-top: 20px;">
                <div class="item-hd">足迹综合分析</div>
                <div class="item-bd zjzhfx">
                   <div class="flex-box">
                       <div class="bar-list" id="hour"></div>
                       <div class="bar-list" id="day"></div>
                       <div class="bar-list" id="month" style="width:450px;"></div>
                   </div>
                </div>
            </div>
            <div class="item" style="margin-top: 20px;">
                <div class="item-hd">最近7天日负荷曲线</div>
                <div class="item-bd">
                    <div id="zjqtfhqx" class="zjqtfhqx"></div>
                </div>
            </div>
            <div class="ynzj-top" style="margin-top: 20px;">
                <div class="item">
                    <div class="hd" style="color:#02fdff">上月计划用能量</div>
                    <div class="inner">
                        <svg width="300" height="300" viewbox="0 0 300 300" :data-precent="12.3" class="svg">
                            <circle cx="150" cy="120" r="90" stroke-width="10" stroke="#00242b" fill="none"></circle>
                            <circle cx="150" cy="120" r="97" stroke-width="5" stroke-linecap="round" stroke="#02fdff" fill="none" transform="matrix(0,-1,1,0,30,270)" stroke-dasharray="0 1069"></circle>
                            <text x="50%" y="120" fill="#02fdff" text-anchor="middle" font-size="18" v-text="data.Near_30Day_Plan"></text>
                            <text x="50%" y="140" fill="#008078" text-anchor="middle" font-size="16">KWH</text>
                            <!--<text x="50%" y="83%" fill="#02fdff" text-anchor="middle" font-size="18">12.3%</text>-->
                            <text x="50%" y="91%" fill="#02fdff" text-anchor="middle" font-size="16">计划用能量</text>

                        </svg>
                    </div>
                </div>
                <div class="item" style="margin:0 50px;">
                    <div class="hd" style="color:#07f900">上月实际用能量</div>
                    <div class="inner">
                        <svg width="300" height="300" viewbox="0 0 300 300" :data-precent="38.3" class="svg">
                            <circle cx="50%" cy="120" r="90" stroke-width="10"   stroke="#00242b" fill="none">
                            </circle>
                            <circle cx="50%" cy="120" r="97" stroke-width="5" stroke-linecap="round" stroke="#07f900" fill="none" transform="matrix(0,-1,1,0,30,270)" stroke-dasharray="0 1069"></circle>
                            <text x="50%" y="120" fill="#07f900" text-anchor="middle" font-size="18" v-text="data.Near_30Day_Real.toFixed(2)"></text>
                            <text x="50%" y="140" fill="#008078" text-anchor="middle" font-size="16">KWH</text>
                            <!--<text x="50%" y="83%" fill="#07f900" text-anchor="middle" font-size="18">38.3%</text>-->
                            <text x="50%" y="91%" fill="#07f900" text-anchor="middle" font-size="16">实际用能量</text>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <div class="hd" style="color:#fffc66">用能量足迹分析</div>
                    <div class="inner two-svg">
                        <div class="wrapper">
                            <svg  width="150" height="300" viewbox="0 0 150 300" :data-precent="38.3" class="svg2">
                                <circle cx="50%" cy="110" r="45" stroke-width="10" stroke="#00242b" fill="none">
                                </circle>
                                <circle cx="50%" cy="60" r="52" stroke-width="5" stroke-linecap="round" stroke="#00ff98" fill="none" transform="matrix(0,-1,1,0,15,185)" stroke-dasharray="0 1069"></circle>
                                <text x="50%" y="35" fill="#00ff98" text-anchor="middle" font-size="16">同比</text>
                                <text x="50%" y="120" fill="#00ff98" text-anchor="middle" font-size="33">↓</text>
                                <text x="50%" y="210" fill="#00ff98" text-anchor="middle" font-size="18" v-text="data.Near_30Day_TongBi_Percent+'%'"></text>
                                <text x="50%" y="250" fill="#00ff98" text-anchor="middle" font-size="20" v-text="data.Near_30Day_TongBi"></text>
                                <text x="50%" y="270" fill="#008078" text-anchor="middle" font-size="12">KWH</text>

                            </svg>
                        </div>
                        <div class="wrapper">
                            <svg  width="150" height="300" viewbox="0 0 150 300" :data-precent="12.3" class="svg2">
                                <circle cx="50%" cy="110" r="45" stroke-width="10" stroke="#00242b" fill="none">
                                </circle>
                                <circle cx="50%" cy="60" r="52" stroke-width="5" stroke-linecap="round" stroke="#ff6300" fill="none" transform="matrix(0,-1,1,0,15,185)" stroke-dasharray="0 1069"></circle>
                                <text x="50%" y="35" fill="#ff6300" text-anchor="middle" font-size="16">环比</text>
                                <text x="50%" y="120" fill="#ff6300" text-anchor="middle" font-size="33" font-weight="bold">↑</text>
                                <text x="50%" y="210" fill="#ff6300" text-anchor="middle" font-size="18" v-text="data.Near_30Day_HuanBi_Percent+'%'"></text>
                                <text x="50%" y="250" fill="#ff6300" text-anchor="middle" font-size="20" v-text="data.Near_30Day_HuanBi"></text>
                                <text x="50%" y="270" fill="#008078" text-anchor="middle" font-size="12">KWH</text>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-hd" style="margin-top: 20px;">本年用电量分析</div>
                <div class="item-bd">
                    <div class="bnydlfx" id="bnydlfx">

                    </div>
                </div>
            </div>


        </div>


    </div>
    <div class="loading" style="display: none;" v-show="loadingFlag">
        <div class="svg-loading">
            <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="circle" class="g-circles g-circles--v1">
                    <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35"
                            cy="16.6987298" r="10"></circle>
                    <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) "
                            cx="16.6987298" cy="35" r="10"></circle>
                    <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60"
                            r="10"></circle>
                    <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) "
                            cx="16.6987298" cy="85" r="10"></circle>
                    <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) "
                            cx="35" cy="103.30127" r="10"></circle>
                    <circle id="7" cx="60" cy="110" r="10"></circle>
                    <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) "
                            cx="85" cy="103.30127" r="10"></circle>
                    <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) "
                            cx="103.30127" cy="85" r="10"></circle>
                    <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60"
                            r="10"></circle>
                    <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) "
                            cx="103.30127" cy="35" r="10"></circle>
                    <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85"
                            cy="16.6987298" r="10"></circle>
                    <circle id="1" cx="60" cy="10" r="10"></circle>
                </g>

                <use xlink:href="#circle" class="use"/>
            </svg>

        </div>
    </div>
</div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/My97DatePicker/WdatePicker.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/ynzj.js"></script>
<script src="../js/common.js"></script>
<style>
    circle {
        -webkit-transition: stroke-dasharray 2s;
        transition: stroke-dasharray 2s;
    }
</style>
</html>